<template>
  <div class="course">
    <Title2>
      <span slot="title">特色课</span>
      <van-icon name="search" slot="search" @click="$router.push('/search')"/>
    </Title2>
    <div class="category">
      <div
        v-for="(item, index) in popup"
        :key="index"
        @click="a(index)"
        :class="{'active':item.flag}"
      >
        {{item.title}}
        <van-icon name="arrow-down" v-show="!item.flag" />
        <van-icon name="arrow-up" v-show="item.flag" />
      </div>
    </div>

    <div class="popup">
      <div v-if="popup[0].flag" class="item1">
        <div class="item">
          <div class="title1">{{popup[0].children[0].name}}</div>
          <div class="content1">
            <div v-for="(val, i) in popup[0].children[0].child" :key="i" class="item1-1" @click="select1(i,val.id)" ref="item1" :class="{'reactive':i==select11}">
              {{val.name}}
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title1">{{popup[0].children[1].name}}</div>
          <div class="content1">
            <div v-for="(val, i) in popup[0].children[1].child" :key="i" class="item1-1" @click="select2(i,val.id)" ref="item2" :class="{'reactive':i==select22}">
              {{val.name}}
            </div>
          </div>
        </div>
        <div class="bottom">
          <van-button type="default" @click="rest">重置</van-button>
          <van-button type="warning" @click="submit">确定</van-button>
        </div>
      </div>
      <div v-if="popup[1].flag" class="item2">
        <div v-for="(item, index) in popup[1].children" :key="index" >
          <div class="item2-1" @click="select3(index,item.id)" ref="item3" :class="{'reactive':index==select33}">{{item.name}}</div>
        </div>
      </div>
      <div v-if="popup[2].flag" class="item3">
        <div v-for="(item, index) in popup[2].children" :key="index">
          <div class="item3-1" @click="select4(index,item.id)" ref="item4" :class="{'reactive':index==select44}">{{item.name}}</div>
        </div>
      </div>
    </div>
    
    <div class="content">
      <div class="wrapper">
        <Card2 :data="courseList" @toCourseInfo="toCourseInfo"/>
        <div v-show="alt" class="alt">
          已经到底了
        </div>
      </div>
    </div>
    <div class="mengtent" v-if="flag" @click="cancel"></div>
  </div>
</template>

<script>
import { courseBasis } from "../untils/netWork";
import Title2 from "../components/common/Title2";
import Card2 from "../components/common/Card2";
import BScroll from "better-scroll";
export default {
  components: {
    Title2,
    Card2
  },
  data() {
    return {
      flag: false,
      popup: [
        {
          title: "分类",
          flag: false,
          children: [
            {
                "id": 1,
                "name": "年级",
                "parent_id": 0,
                "child": [
                    {
                        "id": 1,
                        "name": "初一"
                    },
                    {
                        "id": 2,
                        "name": "初二"
                    },
                    {
                        "id": 3,
                        "name": "初三"
                    },
                    {
                        "id": 4,
                        "name": "高一"
                    },
                    {
                        "id": 5,
                        "name": "高二"
                    }
                ]
            },
            {
                "id": 2,
                "name": "学科",
                "parent_id": 0,
                "child": [
                    {
                        "id": 7,
                        "name": "语文"
                    },
                    {
                        "id": 8,
                        "name": "数学"
                    },
                    {
                        "id": 9,
                        "name": "英语"
                    },
                    {
                        "id": 12,
                        "name": "物理"
                    },
                    {
                        "id": 13,
                        "name": "化学"
                    }
                ]
            }
        ],
          
        },
        {
          title: "排序",
          flag: false,
          children: [
              { "id": 0, "name": "综合排序" },
              { "id": 1, "name": "最新" },
              { "id": 2, "name": "最热" },
              { "id": 3, "name": "价格从高到低" },
              { "id": 4, "name": "价格从低到高" },
          ]
        },
        {
          title: "帅选",
          flag: false,
          children: [
            { "id": 0, "name": "全部" },
            { "id":2, "name": "大班课" },
            { "id":3, "name": "小班课" },
            { "id":4, "name": "公开课" },
            { "id":5, "name": "点播课" },
            { "id":6, "name": "面授课" },
            { "id":7, "name": "音频课" },
            { "id":8, "name": "系统课" },
            { "id":9, "name": "图文课" },
            { "id":10, "name": "会员课" }
          ]
        }
      ],
      courseList: [],//存放页面课程
      page: 1,//当前页数
      limit: 10,//每页多少条数据
      myScroll: null,//存放iscroll
      lastPage:0,//最后一页

      attrVal:'',
      attrId:"",
      orderBy:'',
      courseType: 0,
      select11:-1,
      select22:-1,
      select33:0,
      select44:0,
      alt:false
    };
  },
  methods: {
    toCourseInfo(data){
      this.$router.push({
        path:`/courseInfo/${data}`
      })
    },
    rest(){
      this.attrVal="";
      this.attrId="";
      this.select11=-1,
      this.select22=-1
      this.cancel();
      this.courseBasisHttp1()
    },
    submit(){
      this.cancel();
      this.courseBasisHttp1()
    },
    select1(i,id){
      var item1=this.$refs.item1;
      this.select11=i
      this.attrVal=id
      item1.forEach((el,index)=>{
        item1[index].className="item1-1";
        if(i==index){
          item1[index].className+=" reactive";
        }
      })
    },
    select2(i,id){
      this.attrId=id
      this.select22=i
      var item1=this.$refs.item2;
      item1.forEach((el,index)=>{
        item1[index].className="item1-1";
        if(i==index){
          item1[index].className+=" reactive"
        }
      })
    },
    select3(i,id){
      this.orderBy=id
      this.select33=i;
      var item1=this.$refs.item3;
      console.log(item1)
      item1.forEach((el,index)=>{
        item1[index].className="item2-1";
        if(i==index){
          item1[index].className+=" reactive"
        }
      });
      this.courseBasisHttp1()
      this.cancel();
    },
    select4(i,id){
      this.courseType=id
      this.select44=i;
      var item1=this.$refs.item4;
      item1.forEach((el,index)=>{
        item1[index].className="item3-1";
        if(i==index){
          item1[index].className+=" reactive"
        }
      });
      this.courseBasisHttp1()
      this.cancel();
    },
    a(i) {
      this.popup.forEach((ele, index) => {
        if (index == i) {
          ele.flag = !this.popup[i].flag;
          if (ele.flag) {
            this.flag = true;
          } else {
            this.flag = false;
          }
        } else {
          ele.flag = false;
        }
      });
    },
    cancel() {
      this.popup.forEach((ele, index) => {
        ele.flag = false;
        this.flag = false;
      });
    },
    // 请求全部课程  分页
    courseBasisHttp() {
      var data = {
          page: this.page,
          limit: this.limit,
          course_type: this.courseType
      };
      
      
      courseBasis(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.courseList = [...this.courseList,...res.data.list];
          this.lastPage=res.data.last_page
        }
      });
    },
    courseBasisHttp1(){
      var data = {
          page: this.page,
          limit: this.limit,
          course_type: this.courseType
      };
      if(this.attrVal!==''){
        data.attr_val_id=this.attrVal
      }else if(this.attrId!==""){
        data.attr_val_id=this.attrId
      }
      // else{
      //   data.attr_val_id=""
      // }
      if(this.attrVal!=="" && this.attrId!==""){
        data.attr_val_id=this.attrVal+","+this.attrId
      }
      if(this.orderBy){
        data.order_by=this.orderBy
      };
      courseBasis(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.courseList = [...res.data.list];
          this.lastPage=res.data.last_page
        }
      });
    },
    pullUp(){
      this.myScroll.on("pullingUp", () => {
          // ...发送Ajax从后台拿数据...
          // ...
          if(this.page==this.lastPage){
            this.alt=true;
            setTimeout(()=>{
              this.alt=false
            },1000)  
            return
          }
          
          this.page++
          // console.log(this.page)
          this.courseBasisHttp();
         
          var timer=null;
          this.$nextTick(() => {
            if(!timer){
              timer = setTimeout(()=>{
                  // console.log(this.myScroll.y)
                  this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
                  timer = null;
              },1000)
            }
          });
          this.myScroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
        });
    },
    pullDown(){
      this.myScroll.on("pullingDown", () => {
          // ...发送Ajax从后台拿数据...
          // ...
          // console.log("下拉刷新")
          this.$nextTick(() => {
            this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
          });
          this.myScroll.finishPullDown(); // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
        });
        
    },
    initMyScroll() {
      this.courseBasisHttp();
      this.$nextTick(() => {
        this.myScroll = new BScroll(".content", {
          scrollY: true,
          pullDownRefresh: {
            threshold: 50,
            probeType: 3
          },
          pullUpLoad: {
            threshold: 350
          }
        });
        this.pullUp();
        this.pullDown();
      });
    }
  },
  mounted() {
    this.initMyScroll();
  }
};
</script>

<style lang="scss" scoped>
.course {
  position: relative;
  background: rgb(230, 230, 230);
  // margin-bottom: 50px;
  height: 616px;
  overflow: hidden;
}
.category {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  font-size: 15px;
  .active {
    color: orange;
  }
}

.mengtent {
  width: 100%;
  height: 550px;
  background: rgba($color: #000000, $alpha: 0.8);
  position: absolute;
  top: 90px;
}
.popup {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: white;
  z-index: 100;
  position: absolute;
  margin-top: -1px;

  .item1 {
    .item {
      border-bottom: 1px solid rgb(230, 230, 230);
      padding-bottom: 20px;
      .title1 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 14px;
        color: rgb(130, 130, 130);
      }
      .content1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        align-items: center;
        .item1-1 {
          width: 60px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
          margin: 5px 10px;
          background: rgb(245, 245, 245);
          color: rgb(130, 130, 130);
        }
        .reactive{
          color: orange;
        }
      }
      
    }
    .bottom {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      .van-button {
        width: 150px;
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
        border-radius: 5px;
      }
    }
  }
  .item2 {
    .item2-1 {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid rgb(245, 245, 245);
      text-align: center;
      line-height: 44px;
      font-size: 15px;
      color: rgb(130, 130, 130);
    }
    .reactive{
      color: orange;
    }
  }
  .item3 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: wrap;
    padding: 10px 0;
    .item3-1 {
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: rgb(245, 245, 245);
      margin: 5px 9.3px;
      color: rgb(130, 130, 130);
    }
    .reactive{
      color: orange;
    }
  }
}
.content {
  width: 93%;
  margin: 10px auto;
  height: 525px;
  overflow: hidden;
}
.alt{
  width: 100%;
  height: 30px;
  background: white;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 50px;
}
</style>